<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
        overflow: hidden;
    }
    #wrap{
        position: relative;
        height: 100%;
        overflow: hidden;
        background-color: pink;
    }
    #wrap .scrollBar{
        position: absolute;
        right: 0;
        top: 0;
        background-color: rgb(175, 174, 174);
        width: 4px;
        height: 100%;
        opacity: 0;
        transition: 1s opacity;
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="content"></div>
        <div class="scrollBar"></div>
    </div>
</body>
<script src="transform.js"></script>
<script>
     window.onload=function(){
        document.addEventListener("touchstart",function(ev){
            ev=ev||event;
            ev.preventDefault();
        })
        var wrap=document.querySelector("#wrap");
        var content=document.querySelector("#wrap .content");
        for(var i=0;i<200;i++){
            content.innerHTML+="热爱可低岁月漫长</br>";
        }
     
     //外部的业务逻辑
    //  start的逻辑在竖向滑屏一开始时触发
    //  move的逻辑在竖向滑屏滑动中持续触发
    //  end的逻辑在竖向滑结束时触发
    var bar =document.querySelector("#wrap .scrollBar");
    var content=document.querySelector("#wrap .content");
    //滚动条的高度比上视口的高度等于视口的高度比上内容的高度
    bar.style.height=(document.documentElement.clientHeight/content.offsetHeight)*document.documentElement.clientHeight+"px";
     var callBack={
         start:function(){
            bar.style.opacity=1;
         },
         move:function(){
            //内容滚得实时距离比上内容能滚的最大距离等于滚动条滚得实时距离比上滚动条能滚的最大距离
            var scale=document.documentElement.clientHeight/content.offsetHeight;
            damu.css(bar,"translateY",-scale*damu.css(this,"translateY"));
         },
         end:function(){
            bar.style.opacity=0;
         }
     }
     damu.vMove(wrap,callBack);



    }
</script>
</html>